<template>
  <div class="manageTablePage">
    <div class="table">
      <el-table
        :data="tableData"
        :border="true"
        style="width: 100%; margin-top: 20px"
        row-key="id"
        :tree-props="{ children: 'workBookInfoList' }"
        default-expand-all
      >
        <el-table-column prop="instructName" label="部门职责名称" width="200">
          <template #default="scope">
            {{ scope.row.workBookInfoList ? scope.row.instructName : "" }}
          </template>
        </el-table-column>

        <el-table-column prop="version" label="学年阶段" width="120">
          <template #default="scope">
            {{ !scope.row.workBookInfoList ? EVersion[scope.row.version] : "" }}
          </template>
        </el-table-column>

        <el-table-column prop="content" label="职责内容" />

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.workBookInfoList"
              size="small"
              @click="openDraw(scope.$index, scope.row)"
              >新增</el-button
            >
            <el-button
              v-if="
                getPermission(scope.row, 'canClose') &&
                !scope.row.workBookInfoList
              "
              :type="scope.row.flag === 0 ? 'primary' : ''"
              size="small"
              @click="openInstructs(scope.$index, scope.row)"
              >{{ scope.row.flag === 0 ? "关闭" : "启用" }}</el-button
            >
            <el-button
              v-if="!scope.row.workBookInfoList"
              size="small"
              @click="editInstructs(scope.$index, scope.row)"
              :disabled="scope.row.flag === 0"
              >编辑</el-button
            >
            <el-popconfirm
              v-if="!scope.row.workBookInfoList"
              title="确认要删除吗?"
              confirm-button-text="删除"
              cancel-button-text="不删除"
              confirm-button-type="text"
              cancel-button-type="primary"
              @confirm="deleteInstructs(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button
                  size="small"
                  type="danger"
                  :disabled="scope.row.flag === 0"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { api_openOrCloseWB } from "@/api/manage";
import { cloneDeep } from "lodash-es";
import { computed } from "vue";
import { EVersion } from "../enum";
import permission from "../permission";
import { randomString } from "../utils";

const props = defineProps({
  tableData: Array,
  editInstructs: Function,
  deleteInstructs: Function,
  refresh: Function,
  changeInstructOpenType: Function,
  openDraw: Function,
});

// 清除robotInstructNameAndSentenceDTOS长度为0的数据
const tableData = computed(() => {
  const arr = cloneDeep(props.tableData);

  let result = [];
  arr.forEach((element) => {
    if (element?.instructName === "我的部门职责") {
      return;
    }

    element.id = randomString(32);
    result.push(element);
  });
  return arr || [];
});

const openInstructs = async (index, row) => {
  const res = await api_openOrCloseWB({
    id: row.id,
    flag: row.flag === 0 ? 1 : 0,
  });
  if (res.success === true) {
    ElMessage.success(row.flag === 0 ? "关闭成功" : "启用成功");
    props.changeInstructOpenType(row.id);
  } else {
    ElMessage.error("请求失败,接口返回:" + res.msg);
  }
};

const editInstructs = (index, row) => {
  props.editInstructs(index, row);
};

const deleteInstructs = (index, row) => {
  props.deleteInstructs(index, row);
};

const getPermission = (row, permissionType) => {
  const p = permission.find((v) => v.instructCode === row.instructCode);
  if (!p) return true;
  if (p?.[permissionType] === undefined) {
    return true;
  }
  return p[permissionType] === true;
};
</script>

<style lang="scss" scoped>
.manageTablePage {
  height: 100%;
  overflow: auto;
  .centerItem {
    .centerItemTitle {
      margin-top: 30px;
    }
  }

  :deep(.el-table__row) {
    background-color: #c7c7c7;
  }
  :deep(.el-table__row--level-1) {
    background-color: white;
  }
}
</style>
